<template>
    <div class="study_detail">
      <header>
        <div class="header-left iconfont icon-left" @click= "golast"></div>
        <div class="header-right">
          档案详情
        </div>
      </header>
      <main>
        <div class="flex_part part_1">
          <img :src="infos.photos.split(',')[0]+'!249cartch'" alt="">
          <div class="part1_right">
            <h2>{{infos.course_name}}</h2>
            <p>上课时间：{{infos.course_date}}</p>
            <h3>指导老师：{{infos.teacher}}</h3>
            <div class="flex_part startsing">
              课程评分：
              <yd-rate slot="left" v-model="rate" :readonly="true"  color="#fdc600" active-color="color:#fdc600" size=".22rem"></yd-rate>
            </div>
            <!-- <span>
              {{infos.createtime|formatDate }}
            </span> -->
          </div>
        </div>
        <div class="part_2">
          <div class="line"></div>
          <h1 class="title">课程详情</h1>
          <p>
         {{infos.goal}}
          </p>
          <div class="box">
              <!-- <img src="https://oss.xiaoniaoai.com/icon0102@2x.png" alt=""> -->
              <video id="media" width="100%" height="400"  preload="auto"   x5-video-player-type="h5"  playsinline="true" controls  poster="https://oss.xiaoniaoai.com/1552976017161pic01.png"> 
                   <source :src="infos.video_url">
                </video>
                  <img :src= "items" alt="" v-for="(items,index) of infos.photos.split(',')" v-if=" index <= infos.photos.split(',').length-2 " :key="index">
          </div>
        </div>
        <div class="part_3">
          <div class="flex_part" style="justify-content: space-between">
            <div class="part3_left">
              <div class="line"></div>
              <h1 class="title">名师点评</h1>
            </div>
            <div class="part3_right flex_part">
              <div style="position:relative;" @click= "nice">
                <img src="https://wxoss.xiaoniaoai.com/flower.png" alt="">
                <span id="zantotal">{{zan_total}}</span>
              </div>
              <img src="https://wxoss.xiaoniaoai.com/share.png" alt="" @click="goshare(e)">
            </div>
          </div>
          <div class="flex_part list-item">
            <img src="https://oss.xiaoniaoai.com/jiaoshi.png" alt="" style="width: .9rem;border-radius:.32rem;">
            <div class="item-content" v-html="infos.comment">
             {{infos.comment}}
            </div>
          </div>
           <!-- <div class="flex_part list-item">
            <img src="https://wxoss.xiaoniaoai.com/growth_archives/img/pic.png" alt="" style="width: .9rem;border-radius:.32rem;">
            <input class="item-content" v-model="comment" @blur="changeCount()">
           
               谢谢老师的指导，昊宇能在规定时间内完成任务，并在创意环节想到给螃蟹加上嘴巴和飞行器，让螃蟹能吃上东西和飞上天，并且他设计的飞行器是像直升飞机一样的类型，是能将螃蟹挂起来飞行的，创意无限，想象无限，是老师的引导让昊宇进步飞速。
             <mt-button @click.native = "handleClick" v-if="showcomment" size="small" type="primary"  class="confirmes">确认</mt-button>
          </div>  -->
         
        </div>
        <div class="part_4">
           <div v-show= false>
          <div class="flex_part more" v-if= "showmores">
                <div class="line-more"></div>
                <p>更多精彩</p>
                <div class="line-more"></div>
              </div>
              <ul class="flex_part wrap-box" v-if= "showmores">
                <li class="card" v-for="(item,ins) of msg" :key="ins" v-if="ins<3"  @click= "godetail(ins)">
                  <img :src= "items" alt="" v-for="(items,index) of item.photos.split(',')" v-if=" index <1 " :key="index">
                  <span>{{item.course_name}}</span>        
                </li>
              </ul>
          </div>
          <a  class="btn-more"  @click = "gonext">
            更多精彩点击这里
          </a>
        </div>
      </main>
    </div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios';
import {Toast,Button} from 'mint-ui';
Vue.component(Button.name, Button);
  export default {
    name: "study_detail",
    inject:['reload'],
    data: function () {
      return {
        //评分的分数，四舍五入，只读
        rate:"",
        infos:'',
        info:'',
        id: localStorage.getItem('user_id'),
        e:{},
        uid: localStorage.getItem('user_uid'),
        dataid:'',
        msg:'',
        chisrc:'',
        comment:'',
        showcomment:false,
        showmores:false,
        records:'',
        zan_total:''
      }
    },
    methods: {
       nice(e){
            axios.post('https://shixiaozhang.cn/api/app/courserecord/add_student_vote',{
            uid : this.id ,  
            from_user: '小鸟ssssdsss'  ,   
            nickname :  '微校ssssdsss' ,
            avatar: 'https://wxoss.xiaoniaoai.com/growth_archives/img/img.png'     
                }).then((val) => {
                   console.log(val)
                    if(val.data.code == "1"){
                      this.zan_total ++;
                    }else{
                         Toast({
                            message: val.data.msg,
                            position: 'middle',
                            duration: 1000
                            })
                    }
                }).catch((err) => {
                console.log(err);
                })
           },
            godetail (e) {
              this.$router.push({
              path: '/study_detail',
              query: {
                e:e
              }
            })
       },
      golast () {
        this.$router.go(-1)
        this.reload()
      },
       goshare (e) {
          this.e = e
         this.$router.push({
          path: '/Share',
        
        })
      },
       gonext () {
         this.$router.push('/study_list')
       },
      changeCount:function(){
        this.showcomment=true
        
      },
      handleClick () {
        console.log(this.comment)
          axios.post('https://shixiaozhang.cn/api/app/courserecord/add_student_comment',{
            uid:this.uid,
            comment:this.comment,
            from_user: '' ,  
            nickname:  '',  
            avatar :  '',
            }).then((val) => { 
               this.showcomment= false
             Toast({
                    message: val.data.msg,
                    position: 'middle',
                    duration: 1000
                    })
            }).catch((err) => {
              console.log(err);
            })
      }
    },
  created () {
    // (function() {
    //     "use strict";//严格模式
    //     var video;//video标签
    //     var scale = 0.8;//第一帧图片与源视频的比例
    //     video = $("#video").get(0);//赋值标签
    //     video.on("loadeddata", function () {//加载完成事件，调用函数
    //         var canvas = document.createElement("canvas");//canvas画布
    //         canvas.width = video.videoWidth * scale;
    //         canvas.height = video.videoHeight * scale;
    //         canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);//画图
    //         video.setAttribute("poster", canvas.toDataURL("image/png"));//关键一步 —— 设置标签的 poster 属性的值为 base64 编译过后的canvas绘图。
    //         })
    // }());
    var numbers = this.$route.query.e
    var fromranksing = this.$route.query.godetail
    this.e = this.$route.query.e
        axios.post('https://shixiaozhang.cn/api/app/courserecord/find_student',{
        id:this.id
        }).then((val) => {
           console.log(val);
          this.info = val.data.data;
          this.zan_total = val.data.data.zan_total
        }).catch((err) => {
          console.log(err);
        })
    if(fromranksing =='0'){
       console.log(fromranksing)
      axios.post('https://shixiaozhang.cn/api/app/courserecord/find_courserecord_list',{
        id:this.id
        }).then((val) => {
          console.log(val)
            if(val.data.data.data.length == '0'){
                    Toast({
                    message: '请联系老师发布档案',
                    position: 'middle',
                    duration: 1000
                    })
            }
          this.msg = val.data.data.data
          console.log(this.msg)
            axios.post('https://shixiaozhang.cn/api/app/courserecord/find_courserecord_detail',{
            id:val.data.data.data[fromranksing].id
            }).then((val) => { 
              this.infos = val.data.data;
              this.rate=this.infos.score
            }).catch((err) => {
              console.log(err);
            })
        }).catch((err) => {
          console.log(err);
        })
    }else{
       axios.post('https://shixiaozhang.cn/api/app/courserecord/find_courserecord_list',{
        id: this.id
        }).then((val) => {
          this.msg = val.data.data.data
          if(val.data.data.data.length >=3){
             this.showmores = true
          }
          console.log(this.msg)
            axios.post('https://shixiaozhang.cn/api/app/courserecord/find_courserecord_detail',{
            id:val.data.data.data[numbers].id
            }).then((val) => {
              this.infos = val.data.data;
              this.rate=this.infos.score;
              console.log(this.infos)
            }).catch((err) => {
              console.log(err);
            })
        }).catch((err) => {
          console.log(err);
        })
    }
        
  },
    mounted(){
       this.WXConfig.wxShowMenu(); 
       if(this.comment == ''){
         this.comment = '请回复'
      } 
   },
   updated () {

   }
//   updated() {
//   var box =document.getElementsByClassName('item-content')[0]
//   var chi = box.firstChild.querySelector('img');
//   this.chisrc = chi.getAttribute("src")
//   console.log(chi,this.chisrc)
//   chi.style.width = '100%'
// }
  //  filters: {
	// 		formatDate:function (date) {
	// 		var d = new Date(date);
	// 		var year = d.getFullYear();
	// 		var month = d.getMonth() + 1;
	// 		var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate();
	// 		return  year+ '-' + month + '-' + day + ' ' ;
	// 		}
	// 	}
  }
</script>

<style scoped>
  header{
    background: linear-gradient(to right,#35B6A8,#00DFB9);
    height: 1rem;
    font-size: .38rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 .4rem;
  }
  .header-right{
    margin-left: .2rem;
  }
  main{
    padding: .5rem .3rem;
    background: #fff;
  }
  #media{
    width: 100%;
    float: left;
    margin-right: .2rem
  }
  .confirmes{
     float: right;
     position: absolute;
     right: 0;
     margin-top:.1rem
  }
  .flex_part{
    display: flex;
    align-items: center;
  }
  .part_1{
    margin-bottom: .4rem;
  }
  .part_1 img{
    width: 2.5rem;
    height: 2.66rem;
    -webkit-border-radius: .1rem;
    -moz-border-radius: .1rem;
    border-radius: .1rem;
  }
  .part1_right{
    margin-left: .4rem;
  }
  .part1_right h2{
    color: #737070;
    font-size: .3rem;
    margin-bottom: .1rem;
  }
  .part1_right p{
    color: #A2A2A2;
    font-size: .26rem;
    margin-bottom: .35rem;
  }
  .part1_right h3{
    color: #7E7E7E;
    font-size: .26rem;
    margin-bottom: .15rem;
  }
  .part1_right div{
    color: #8B8A8A;
    font-size: .26rem;
    margin-bottom: .2rem;
  }
  .part_2{
    width: 100%;
  }
  .line{
    width: .3rem;
    height: .06rem;
    background: #FDC600;
    border-radius:.04rem;
  }
  .title{
    font-size: .32rem;
    color: #333333;
    margin: .1rem 0 .35rem;
  }
  .part_2 p{
    font-size: .26rem;
    color: #6C6C6C;
    line-height: .45rem;
  }
  .part_2 div.box{
    width: auto;
    margin: .4rem 0;
  }
  div.box img{
    width: 100%;
    margin-right: .2rem;
    border-radius:.1rem;
    margin-top:.2rem
  }
  .part3_right {
    position: fixed;
    display: flex;
    top: 63%;
    right: .2rem;
    height: 2rem;
    justify-content: space-around;
    flex-direction: column;
  }
  .part3_right div,
  .part3_right img{
    width: .9rem;
    margin-right: .15rem;
    opacity: .95
  }
  .part3_right div span{
    position: absolute;
    display: block;
    bottom: .11rem;
    font-size: .16rem;
    color: #ffffff;
    right: 41%;
    font-size:.24rem
  }
  .part3_right > div {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
  }
  .list-item{
    align-items: flex-start;
    padding: .4rem 0;
  }
  .item-content{
    margin-left: .1rem;
    font-size: .24rem;
    color: #787878;
    line-height: .45rem;
    padding: .2rem .1rem .2rem .3rem;
    width: 82%;
    text-indent:.48rem
  }
 .item-content > p >img {
    width: 100%
  }
  .list-item:nth-child(2) .item-content{
    background: url(https://wxoss.xiaoniaoai.com/growth_archives/img/bg-comment02.png) no-repeat;
    background-size:100% 100%;
    background-position: 0 0;
    font-size:.26rem;
    text-indent: 0;
  }
  .list-item:nth-child(3) .item-content{
    background: url(https://wxoss.xiaoniaoai.com/growth_archives/img/bg-comment01.png) no-repeat;
    background-size:100% 100%;
    background-position: 0 0;
  }
  .more{
    width: 94%;
    margin: auto;
  }
  .line-more{
    width: 2.5rem;
    height: .02rem;
    background: #D2D2D2;
  }
  .more p{
    margin: 0 .2rem;
    font-size: .26rem;
    color: #737070;
  }
  .wrap-box{
    width: 100%;
    flex-wrap: wrap;
    margin-top: .5rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
   .wrap-box > li{
       display: flex;
       
       flex-direction: column;
       justify-content: space-between;
      align-items: center;
   }
  .card{
    width: 2.1rem;

    margin-right: .15rem;
    /*border: solid 1px black;*/
    box-shadow: 0 0 10px #E5E5E5;
  }
  .card img{
    width: 100%;
    height: 3.2rem;
  }
  .card p{
    font-size: .2rem;
    color: #737070;
    width: 100%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    margin: .15rem .1rem .1rem;
  }
  .btn-more{
    text-align: center;
    width: 100%;
    height: .72rem;
    color: #FFFFFF;
    line-height: .72rem;
    background: #07DDB5;
    font-size: .28rem;
    border-radius:.04rem;
    margin-top: .5rem;
  }
</style>
